<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="layui/layui.js" type="text/javascript" charset="UTF-8"></script>
<link href="layui/css/layui.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.8.2.js" charset="UTF-8"></script>
<title>Insert title here</title>
</head>
<body>

<form class="layui-form" >
<div class="layui-form-item">
  <label class="layui-form-label">姓名</label>
  <div class="layui-input-block">
    <input type="text" name="name" required  lay-verify="required" placeholder="请输入姓名" autocomplete="off" class="layui-input">
  </div>
</div>
<div class="layui-form-item">
  <label class="layui-form-label">简介</label>
  <div class="layui-input-block">
    <input type="text" name="jianjie" required  lay-verify="required" placeholder="请输入简介" autocomplete="off" class="layui-input">
  </div>
</div>


  <div class="layui-form-item">
  <label class="layui-form-label">作品</label>
  <div class="layui-input-block">
    <input type="text" name="zp" required  lay-verify="required" placeholder="请输入作品" autocomplete="off" class="layui-input">
  </div>
</div>

 <div class="layui-form-item">
  <label class="layui-form-label">产品图片</label>
  <div class="layui-input-block">
    <button type="button" class="layui-btn" id="test1"><i class="layui-icon">&#xe67c;上传图片</i></button>
  <img src=" " style ="width:200px; height:200px"/>
  </div>
</div>
 
  
<div class="layui-form-item">
  <div class="layui-input-block">
    <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
  </div>
  </form>
  <script>

  layui.use('form', function(){
  	var form = layui.form;

  	//监听提交

  	layui.use('upload', function(){
  	  var upload = layui.upload;
  	   
  	  //执行实例
  	  var uploadInst = upload.render({
  	    elem: '#test1' //绑定元素
  	    ,url: 'SjstpServlet' //上传接口
  	    ,done: function(res){
  	      //上传完毕回调
  	    }
  	    ,error: function(){
  	      //请求异常回调
  	    }
  	  });
  	
  	  
  	  form.on('submit(formDemo)', function(data){
  		  console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
  		  console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
  		  console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
  		
  		  $.ajax({
  				url:"SjsTjServlet",//地址
  				type:"get",//请求的方式
  				data: data.field,
  				success: function(res){//成功以后的回调函数
  					
  					if(res==1){
  						alert("成功");
  					}else{
  						alert("失败");
  					}
  				}

  			});
  		  
  		  return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
  		});
  	  
  	  
  	  
  	});
  });

  	
  </script>



</body>
</html>